<template>
  <div class="box">
    <div style="color: white" class="left">
      <div class="left-card">
        <section>
          <div>较上日+ {{ store.state.chinaAdd.localConfirmH5 }}</div>
          <div>{{ store.state.chinaTotal.localConfirm }}</div>
          <div>本土现有确诊</div>
        </section>
        <section>
          <div>较上日+ {{ store.state.chinaAdd.nowConfirm }}</div>
          <div>{{ store.state.chinaTotal.nowConfirm }}</div>
          <div>现有确诊</div>
        </section>
        <section>
          <div>较上日+ {{ store.state.chinaAdd.confirm }}</div>
          <div>{{ store.state.chinaTotal.confirm }}</div>
          <div>累计确诊</div>
        </section>
        <section>
          <div>较上日+ {{ store.state.chinaAdd.noInfect }}</div>
          <div>{{ store.state.chinaTotal.noInfect }}</div>
          <div>无症状感染者</div>
        </section>
        <section>
          <div>较上日+ {{ store.state.chinaAdd.importedCase }}</div>
          <div>{{ store.state.chinaTotal.importedCase }}</div>
          <div>境外输入</div>
        </section>
        <section>
          <div>较上日+ {{ store.state.chinaAdd.dead }}</div>
          <div>{{ store.state.chinaTotal.dead }}</div>
          <div>累计死亡</div>
        </section>
      </div>
      <div class="left-pie"></div>
      <div class="left-line"></div>
    </div>
    <div id="china" class="center"></div>
    <div style="color: white" class="right">
      <table class="table" border="1" cellspacing="0">
        <thead>
          <tr>
            <th>地区</th>
            <th>新增确诊</th>
            <th>累计确诊</th>
            <th>治愈</th>
            <th>死亡</th>
          </tr>
        </thead>
        <transition-group
          enter-active-class="animate__animated animate__zoomInDown"
          tag="tbody"
        >
          <tr
            v-for="(item, index) in store.state.children"
            :key="item.name + index"
          >
            <td align="center">{{ item.name }}</td>
            <td align="center">{{ item.today.confirm }}</td>
            <td align="center">{{ item.total.confirm }}</td>
            <td align="center">{{ item.total.heal }}</td>
            <td align="center">{{ item.total.dead }}</td>
          </tr>
        </transition-group>
      </table>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted } from "vue";
import { store } from "./store/index";
import { geoCoordMap } from "./assets/geomap";
import * as echarts from "echarts";
import "./assets/china";
import "animate.css";
export default defineComponent({
  setup() {
    onMounted(async () => {
      await store.dispatch("getList");
      getEcharts();
      getEchartspie();
      getEchartsline();
    });
    const getEcharts = () => {
      const city = store.state.count.diseaseh5Shelf.areaTree[0].children;
      console.log(city[7]);
      store.state.children = city[6].children;
      const data = city.map((value) => {
        return {
          name: value.name,
          value: geoCoordMap[value.name].concat(value.total.nowConfirm),
          children: value.children,
        };
      });

      const charts = echarts.init(
        document.querySelector("#china") as HTMLElement
      );
      charts.setOption({
        geo: {
          map: "china",
          aspectScale: 0.8,
          layoutCenter: ["50%", "50%"],
          layoutSize: "100%",
          itemStyle: {
            areaColor: {
              type: "linear-gradient",
              x: 0,
              y: 1200,
              x2: 1000,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#152E6E", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#0673AD", // 50% 处的颜色
                },
              ],
              global: true, // 缺省为 false
            },
            shadowColor: "#0f5d9d",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 0.5,
          },
          emphasis: {
            areaColor: "#0f5d9d",
          },

          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "rgba(0, 10, 52, 1)",
                borderColor: "rgba(0, 10, 52, 1)",
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                },
              },
              label: {
                show: false,
                color: "#FFFFFF",
                fontSize: 12,
              },
            },
          ],
        },
        series: [
          {
            type: "map",
            map: "china",
            aspectScale: 0.8,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "100%",
            label: {
              show: true,
              color: "#FFFFFF",
              fontSize: 12,
            },
            itemStyle: {
              areaColor: "#0c3653",
              borderColor: "#1cccff",
              borderWidth: 1.8,
            },
            emphasis: {
              areaColor: "#56b1da",
              label: {
                show: true,
                color: "#fff",
              },
            },
            data: data,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            symbolSize: [40, 40],
            label: {
              show: true,
              color: "#fff",
              formatter(value: any) {
                return value.data.value[2];
              },
            },
            itemStyle: {
              color: "blue", //标志颜色
            },
            data: data,
          },
        ],
      });
      charts.on("click", (e: any) => {
        store.state.children = e.data.children;
      });
    };

    const getEchartspie = () => {
      const charts = echarts.init(
        document.querySelector(".left-pie") as HTMLElement
      );
      charts.setOption({
        backgroundColor: "#223651",
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            itemStyle: {
              borderRadius: 4,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "15",
              },
            },
            data: store.state.cityDetails.map((value) => {
              return {
                name: value.city,
                value: value.nowConfirm,
              };
            }),
          },
        ],
      });
    };
    const getEchartsline = () => {
      const charts = echarts.init(
        document.querySelector(".left-line") as HTMLElement
      );
      charts.setOption({
        backgroundColor: "#223651",
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: store.state.cityDetails.map((value) => value.city),
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        label: {
          show: true,
        },
        series: [
          {
            data: store.state.cityDetails.map((value) => value.nowConfirm),
            type: "line",
            smooth: true,
          },
        ],
      });
    };
    return { store };
  },
});
</script>

<style lang="less" scoped>
@itemColor: #41b0db;
@itemBg: #223651;
@itemBorder: #212028;
* {
  margin: 0;
  padding: 0;
}
.left-card {
  margin-left: 10px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;

  section {
    background-color: @itemBg;
    border: 1px solid @itemBorder;
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    div:nth-child(2) {
      color: @itemColor;
      padding: 10px 0;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.left-pie {
  margin-top: 20px;
  margin-left: 10px;
  height: 200px;
}
.left-line {
  margin-top: 20px;
  margin-left: 10px;
  height: 250px;
}
.table {
  width: 100%;
  background: #212028;
  tr {
    th {
      padding: 5px;
      white-space: nowrap;
    }
    td {
      padding: 5px 10px;
      width: 100px;
      white-space: nowrap;
    }
  }
}
body,
html,
#app {
  height: 100%;
  overflow: hidden;
}

.box {
  height: 100vh;
  display: flex;
  overflow: hidden;
  background: url("./assets/1.webp") no-repeat;
  background-size: 100% 100%;
  .left {
    width: 400px;
  }

  .center {
    flex: 1;
  }

  .right {
    width: 400px;
  }
}
</style>